// 8、函数式组件中通过Hooks定义状态、useState方法的使用、useEffect的使用、
// useState回调函数参数、useEffect方法清理副作用
import React, {useState,useEffect} from 'react';
import './Eight.css'

// 定义子组件
function Son1(props){
    // 注意：状态的初始值不是固定的值,而是通过计算其他数据返回的值
    // 此时uesState的参数就要使用回调函数的方式
   let [count,setCount] = useState(()=>{
        return props.stus.length
    })

    useEffect(()=>{
        // 在组件挂载时执行
        let timer = setInterval(()=>{
            console.log('哈喽')
        },1000)
        // 副作用方法里面返回的方法，会在组件销毁时执行
        // 这个返回的函数就充当了类组件中componentWillUnmount生命周期函数的作用
        return () =>{
            clearInterval(timer)
            console.log(timer)
        }
    })

    return(
        <div className='title'>
            <h3>学生数量：{count}</h3>
        </div>
    )
}

function Eight(props) {
    let [isShow,setIsShow] = useState(true)

    let [stus, setStus] = useState([
        {no: 1001, name: '阿龙', age: 20, sex: '男'},
        {no: 1002, name: '阿梅', age: 20, sex: '女'}
    ])
    const delStudent = (index) => {
        if(window.confirm('确定删除吗?')){
            console.log(index)
            // let ret = stus.slice()
            let ret = [...stus]
            ret.splice(index, 1)
            setStus([...ret])
        }
    }
    let [stu,setStu] = useState({
        no:'', name:'', age:'', sex:''
    })
    // 课程数组
    let [subjects,setSubjects] = useState([])
    // 添加学生数据
    const changeStu = (e,type) => {
        setStu({...stu, [type]: e.target.value})
    }
    // 添加学生
    const addStu = () => {
        setStus([...stus,stu])
        cancel()
    }
    // 取消方法
    const cancel = () => {
        setStu({
            no:'', name:'', age:'', sex:''
        })
    }

    // 定义函数式组件所有副作用代码，除了渲染ui之外的代码
    useEffect(()=>{

        console.log('useEffect')
        // 手动操作DOM
        document.title = '学生数量' + stus.length
        // 参数添加一个空数组，副作用附件内代码只在初始化时执行一次
        // 默认情况下：只要页面数据改变，副作用函数都会被执行一次，如果希望该副作用代码只在页面初始化时执行一次，需要在最后一个参数写入一个空数组
        // useEffect回调函数中用到的数据(比如,stus)就是依赖项数据，就应该出现在依赖项数组中,如果不添加依赖项就会有bug出现
    },[stus]) // 添加特定依赖项，在特定依赖项发生变化时，副作用函数内代码重新执行

    // 分开写，因为发请求代码不需要重新执行
    useEffect(()=>{
        // 发送ajax请求
        fetch('https://bingjs.com:8001/Subject/GetAll').then(r=>r.json()).then(r=>{
            setSubjects([...r])
            console.log(subjects)
        })
    },[])

    return (
        <div className='title eight'>
            <h2>Eight</h2>
            <table>
                <thead></thead>
                <tbody>
                <tr>
                    <td>学号</td>
                    <td><input type="text" value={stu.no} onChange={(e)=>{changeStu(e,'no')}} /></td>
                </tr>
                <tr>
                    <td>姓名</td>
                    <td><input type="text" value={stu.name} onChange={(e)=>{changeStu(e,'name')}} /></td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td><input type="text" value={stu.age} onChange={(e)=>{changeStu(e,'age')}} /></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td><input type="text" value={stu.sex} onChange={(e)=>{changeStu(e,'sex')}} /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button onClick={addStu}>添加</button>
                        <button onClick={cancel}>取消</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <table>
                <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {
                    stus.map((r, i) => {
                        return (
                            <tr key={r.no}>
                                <td>{r.no}</td>
                                <td>{r.name}</td>
                                <td>{r.age}</td>
                                <td>{r.sex}</td>
                                <td>
                                    <button onClick={() =>{delStudent(i)}}>删除</button>
                                </td>
                            </tr>
                        )
                    })
                }
                </tbody>
            </table>
            <button onClick={()=>{setIsShow(!isShow)}}>显示/隐藏</button>
            {isShow?<Son1 stus={stus}></Son1> : null}
        </div>
    );
}

export default Eight;
